<template>
  <div>
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-calendar v-model="show" @confirm="confirm" /> -->
    <!-- 
      {
        A:[
          {a开头城市}
        ]
        B:[
          {b开头城市}
        ]
        C:[
          {c开头城市}
        ]
      }
     -->
    <van-index-bar highlight-color="#ff0000" @change="change">
      <template v-for="(item, key, index) in dataList">
        <van-index-anchor :index="key" />
        <van-cell v-for="val in item">
          <template #title>
            <van-icon name="location-o" />
            <span @click="clickFn(val.cityId,val.name)" class="custom-title">{{
              val.name
            }}</span>
          </template>
        </van-cell>
      </template>
    </van-index-bar>
  </div>
</template>




<script>
/* import Vue from "vue";
// vant组件样式
// import "vant/lib/button/style";
// import "vant/lib/calendar/style";
// 使用的组件
import { Button, Calendar } from "vant";

Vue.use(Button);
Vue.use(Calendar); */

import Vue from "vue";

export default {
  data() {
    return {
      show: true,
      dataList: [],
    };
  },
  async mounted() {
    let ret = await this.$api.getCitiesInfo();
    this.dataList = ret;
    // console.log(ret)  
  },
  methods: {
    confirm(evt) {
      this.show = false;
      console.log(evt);
    },
    clickFn(cityId,name) {
      // console.log(cityId);
      this.$store.dispatch('cityId',{cityId,name})
      // this.$eventBus.$emit("decreased", {
      //   cityId,
      //   name
      // });
      this.$router.push({name:"/"})
    },
    change(evt) {
      console.log(evt);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

